<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>首页</title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link href="css/index.css" rel="stylesheet" />
	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?cb5d49b07e0a753dc8ee27ba2c73495d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</head>

<body>
	<div class="container">
		<div class="top">
			<div class="header mui-row">
				<div class="left mui-col-xs-6">
					<span class="mui-icon mui-icon-arrowleft"></span>
					<img src="./images/logo.gif" alt="">
					<span class="title">生活</span>
				</div>
				<div class="location mui-col-xs-6">
					<img src="./images/loc .gif" alt="">
					<div class="address mui-ellipsis">苏州中心商场C座</div>
					<span class="mui-icon mui-icon-arrowright"></span>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="search mui-row">
				<div class="mui-col-xs-10 ">
					<div class="mui-input-row mui-search">
						<input type="search" placeholder="搜索你想要的内容" class="mui-input-clear" placeholder="">
					</div>
				</div>
				<div class="mui-col-xs-2 scanBtn">
					<div class="mui-row  mui-text-center">
						<div class="mui-col-xs-12 scanImg">
							<image src="./images/scan.gif" class="scanIcon" />
						</div>
						<div class="mui-col-sm-12 text">扫一扫</div>
					</div>
				</div>
			</div>
			<!-- 轮播 -->
			<div class="mui-slider poster">
				<div class="mui-slider-group">
					<!--支持循环，需要重复图片节点-->
					<!-- <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
								src="./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg" /></a></div> -->
					<!-- <div class="mui-slider-item"><a href="#"><img src="./images/banner1.jpg" /></a></div> -->
					<!-- <div class="mui-slider-item"><a href="#"><img src="./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg" /></a></div> -->
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./images/banner1.jpg" /></a>
					</div>
				</div>
			</div>
		</div>

		<!-- 栏目column -->
		<div class="columns mui-row">
			<div class="mui-col-xs-2 mui-text-center">
				<div class="columnLogo">
					<img src="./images/wm.jpg" alt="" class="img">
				</div>
				<div class="columnTitle">外卖</div>
			</div>
			<div class="mui-col-xs-2 mui-text-center">
				<div class="columnLogo">
					<img src="./images/ms.jpg" alt="" class="img">
				</div>
				<div class="columnTitle">美食</div>
			</div>
			<div class="mui-col-xs-2 mui-text-center">
				<div class="columnLogo">
					<img src="./images/jy.jpg" alt="" class="img">
				</div>
				<div class="columnTitle">教育</div>
			</div>
			<div class="mui-col-xs-2 mui-text-center">
				<div class="columnLogo">
					<img src="./images/yl.jpg" alt="" class="img">
				</div>
				<div class="columnTitle">娱乐</div>
			</div>
			<div class="mui-col-xs-2 mui-text-center">
				<div class="columnLogo">
					<img src="./images/jc.jpg" alt="" class="img">
				</div>
				<div class="columnTitle">建材</div>
			</div>
			<div class="mui-col-xs-2 mui-text-center">
				<div class="columnLogo">
					<img src="./images/js.jpg" alt="" class="img">
				</div>
				<div class="columnTitle">健身</div>
			</div>
		</div>

		<!-- 产品列表 -->
		<div class="dataList">
			<div class="cardList">
				<div class="mui-card cardItem">
					<div class="mui-card-content">
						<img src="./images/pd1.jpg" alt="" class="itemImg">
					</div>
					<div class="mui-card-footer mui-row">
						<div class="title mui-ellipsis mui-col-xs-12">强化地板-白色爱琴海</div>
						<div class="desc mui-ellipsis mui-col-xs-12">欧式风格:浪漫艺术与生活品质的追求</div>
						<div class="data mui-col-xs-12">
							<div class="price">¥<span class="num">999</span>/平</div>
							<div class="salseNum">已售2份</div>
						</div>
					</div>
				</div>

				<div class="mui-card cardItem">
					<div class="mui-card-content">
						<img src="./images/pd2.jpg" alt="" class="itemImg">
					</div>
					<div class="mui-card-footer mui-row">
						<div class="title mui-ellipsis mui-col-xs-12">美食名称-白色爱琴海</div>
						<div class="desc mui-ellipsis mui-col-xs-12">欧式风格:浪漫艺术与生活品质的追求</div>
						<div class="data mui-col-xs-12">
							<div class="price">¥<span class="num">999</span>/平</div>
							<div class="salseNum">已售3份</div>
						</div>
					</div>
				</div>

				<div class="mui-card cardItem">
					<div class="mui-card-content">
						<img src="./images/pd2.jpg" alt="" class="itemImg">
					</div>
					<div class="mui-card-footer mui-row">
						<div class="title mui-ellipsis mui-col-xs-12">美食名称-白色爱琴海</div>
						<div class="desc mui-ellipsis mui-col-xs-12">欧式风格:浪漫艺术与生活品质的追求</div>
						<div class="data mui-col-xs-12">
							<div class="price">¥<span class="num">999</span>/平</div>
							<div class="salseNum">已售3份</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 模板引擎 -->
	<!-- <script type="text/html" id="tpl">
		{{ each items v i }}
		<div class="mui-card">
			<div class="mui-card-content">
				<img src="{{ v }}" alt="" class="itemImg">
			</div>
			<div class="mui-card-footer mui-row">
				<div class="title mui-ellipsis mui-col-xs-12">强化地板-白色爱琴海</div>
				<div class="desc mui-ellipsis mui-col-xs-12">欧式风格:浪漫艺术与生活品质的追求</div>
				<div class="data mui-col-xs-12">
					<div class="price">¥<span class="num">999</span>/平</div>
					<div class="salseNum">已售2份</div>
				</div>
			</div>
		</div>
		{{ /each }}
	</script> -->
	<script src="js/jquery-2.2.4.min.js"></script>
	<script src="js/jquery.waterfall.js"></script>
	<script src="js/template-web.js"></script>
	<script>
		$(function () {
			render()

			function render() {
				// var dataList = ["./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg",
				// 	"./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg",
				// 	"./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg", "./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg",
				// 	"./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg", "./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg",
				// 	"./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg", "./images/9965de69c69b70d0dab1bb65cd5dc62e.jpg",
				// ]
				// var htmlStr = template("tpl", dataList);
				// $('.cardList').append(htmlStr);
				$('.cardList').waterFall();

				// var gallery = mui('.mui-slider');
				// gallery.slider({
				// 	interval: 1000 //自动轮播周期，若为0则不自动播放，默认为0；
				// });
			}
		})
	</script>
</body>

</html>
